﻿<!--采用html5-->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <!--页面显示适应移动设备-->
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <title>我的app</title>
        <style>
            html{
                height:100%;
            }
            body{
                height:100%;
                padding: 0px;
                margin:0px;
            }
            /*类选择器*/
           .my-container{
             width:100%;
             height:100%;
             background-color:#f0f0f0;


           }
           .my-input{
               position:relative;
         
           }
           .my-input input{
               box-sizing: border-box;
               width:100%;
               height: 50px;
               border:none;/*无边框*/
               outline: none;/*外轮廓*/
               border-bottom: 1px solid #E0E0E0;
               padding-left:80px;
           }
           .my-input label{
               position:absolute;
               left:0px;
               top:0px;
               line-height: 50px;
               font-size: 18px;
               padding-left: 3px;

           }
           .my-title{
             
               font-size: 55px;
               text-align: center;
               color:#CCCCCC;
               padding-top:25%;
               padding-bottom: 40px;
               font-weight: bold;
               text-shadow: 2px 12px 10px #cccccc;
           }
          .my-btn{
              width: 100%;
              height:50px;
              background-color: aqua;
              border:none;
              outline: none;
              color:white;
              font-size: 20px ;
              border-radius: 10px;
              margin-top:20px;
          }
          .my-btn:active{
              background-color: #ff0000;
          }
          .my-footer{
              text-align: center;
              color:#aaaaaa;
              padding-top:80px;
          }
        </style>
    </head>
    <body>

      
       <!--div:矩形区域-->
       <div class="my-container">
        <div class="my-title">掌上办公</div>
            <div style="padding-left:3px;padding-right:3px;box-sizing:border-box">
                <div class="my-input">
                    <label>账号</label>
                    <input type="text">
                </div>
                <div class="my-input">
                    <label>密码</label>
                    <input type="password">
                </div>
                <div><button class="my-btn">登录</button></div>
            </div>
            <div class="my-footer">版权所有&copy;最终解释权为大山软件信息有限公司</div>
       </div>
    </body>

</html>